<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../../assets/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="../../assets/css/admin.css"/>
</head>

<body>
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-md12">
      <blockquote class="layui-elem-quote" style="background-color: #fff">
        <label class="layui-form-label-seach">用户名称：</label>
        <div class="layui-input-inline">
          <input type="text" id="accountName" autocomplete="off" placeholder="请输入用户组名称"
                 class="layui-input">
        </div>
        <a href="javascript:;" class="layui-btn " id="search">
          <i class="layui-icon">&#xe615;</i> 搜索
        </a>
        <a href="javascript:;" class="layui-btn layui-btn-warm" id="add"
           style="float: right;margin-right: 20px;">
          <i class="layui-icon">&#xe608;</i> 添加用户
        </a>
      </blockquote>
    </div>
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">api列表</div>
        <div class="layui-card-body">
          <table class="layui-hide" id="example">
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="../../js/common/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../../assets/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common/table.js"></script>
<script type="text/javascript" src="../../js/common/commonUtil.js"></script>
<script>
  layui.config({
    base: '../../assets/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'table'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        table = layui.table;
    table.render({
      elem: '#example',
      url: 'http://localhost:8080/api/configuserkeys',

      page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
        layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
        //,curr: 5 //设定初始在第 5 页
        ,
        groups: 1 //只显示 1 个连续页码
        ,
        first: false //不显示首页
        ,
        last: false //不显示尾页

      },
      cols: [
        [{
          field: 'createby',
          width: 100,
          title: '用户名称'
        }, {
          field: 'platform',
          width: 120,
          title: '平台',
          sort: true
        }, {
          field: 'apikey',
          width: 120,
          title: 'api-key'
        }, {
          field: 'secretkey',
          width: 120,
          title: 'secret-key'
        }, {
          field: 'createby',
          width: 120,
          title: '创建时间',
          sort: true
        }, {
          field: 'updatedate',
          width: 230,
          title: '更新时间',
          sort: true
        }, {
          field: 'id',
          width: 120,
          title: '操作'
        }]
      ]
    });

/*
    table.render({
      elem: '#example'
      ,url: 'http://localhost:3000/posts' //数据接口
      ,page: true //开启分页
      ,cols: [[ //表头
        {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'username', title: '用户名', width:80}
        ,{field: 'sex', title: '性别', width:80, sort: true}
        ,{field: 'city', title: '城市', width:80}
        ,{field: 'sign', title: '签名', width: 177}
        ,{field: 'experience', title: '积分', width: 80, sort: true}
        ,{field: 'score', title: '评分', width: 80, sort: true}
        ,{field: 'classify', title: '职业', width: 80}
        ,{field: 'wealth', title: '财富', width: 135, sort: true}
      ]]
    });*/

    $("#add").on('click', function (e) {
      index = ComUtil.openLayerWin('信息编辑', 'api-edit.html',
          {
            end: function () {
              intPageTable()
            }
          });
    })
    $("#search").on('click', function (e) {
      intPageTable()
    })
  });
</script>
</div>
</body>

</html>